<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>{$row.title}</title>
</head>
<body>
    <div class="col-xs-12 col-sm-8">
        <input id="rimage"  style="display: none;"  type="text" value="{$row.image_info|htmlentities}">
        <img   class="poster img-responsive"  style="width: 100% !important;"  src="{$row.image|htmlentities}"/>




        <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
        <script src="/assets/libs/html2canvas.min.js"></script>
        <script src="/assets/libs/qrcode.min.js"></script>
        <script  type="text/javascript">
            var image_info=$('#rimage').val()?JSON.parse($('#rimage').val()):{share:"霸屏同城",width:"150px",height:"150px",top:"30px",left:"30px"};

            var share_url=image_info.share;
            $(function () {
                addqr();
            });
            function addqr()
            {

                let style=`width: ${image_info.width}; height:  ${image_info.height}; cursor: move; position: absolute; top:  ${image_info.top}; left:  ${image_info.left};`;
                $html='<div id="box" type="qr" index="2" style="'+style+'"><div id="qr" style="width:100%" > </div>';

                if( $('.poster').length!==0&&$('#box').length===0) {
                    $('.poster').after($html);
                }
                var qrcode = new  QRCode(document.getElementById("qr"), {
                    text: "{$url}",
                    width:150,
                    height:150,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    typeNumber:4,
                    correctLevel : QRCode.CorrectLevel.H
                });
                $('#qr').find('img').css('width','100%');

                $(document).mousemove(function(e) {
                    if (!!this.move) {
                        var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                            callback = document.call_down || function() {
                                $(this.move_target).css({
                                    'top': e.pageY - posix.y,
                                    'left': e.pageX - posix.x
                                });
                            };

                        callback.call(this, e, posix);
                    }
                }).mouseup(function(e) {
                    if (!!this.move) {
                        var callback = document.call_up || function(){};
                        callback.call(this, e);
                        $.extend(this, {
                            'move': false,
                            'move_target': null,
                            'call_down': false,
                            'call_up': false
                        });
                    }
                });

                $('#box')[0].ondragstart=function () {	//很多浏览器中默认允许拖动图片到新标签页打开，要先禁止，否则影响效果。如果你要拖动的不是图片，可以去掉
                    return false;
                };
                $('.poster')[0].ondragstart=function () {
                    return false;
                };



            }



        </script>



    </div>



</body>
</html>



